<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>SimpleFolio - Portfolio Template
    </title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="images/favicon.png">
    <!-- ##### STYLESHEETS ##### -->
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Linea Icons -->
    <link href="linea/styles.css" rel="stylesheet">
    <!-- Owl Carousel -->
    <link href="css/owl.carousel.min.css" rel="stylesheet">
    <link href="css/owl.theme.default.min.css" rel="stylesheet">
    <!-- Magnific popup -->
    <link href="css/magnific-popup.min.css" rel="stylesheet">
    <!-- Preloader -->
    <link href="css/preloader.min.css" rel="stylesheet">
    <!-- Responsive -->
    <link href="css/responsive.min.css" rel="stylesheet">
    <!-- Font Awesome Icons -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400" rel="stylesheet">
    <!-- Main styles -->
    <link href="css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
  </head>
  <body>
    <!-- Preloader -->
    <div class="preloader">
      <div class="spinner">
      </div>
    </div>
    <!-- end Preloader -->
    <!-- Toggle Menu -->
    <button class="toggle-btn">
      <span class="lines">
      </span>
    </button>
    <div class="menu">
      <h3>覃仁飞
      </h3>
      <ul class="nav">
        <li class="active">
          <a href="#home">主页
          </a>
        </li>
        <li>
          <a href="#about">关于我
          </a>
        </li>
        <li>
          <a href="#portfolio">作品
          </a>
        </li>
        <!-- <li>
          <a href="#resume">技能
          </a>
        </li>
        <li>
          <a href="#blog">博客
          </a>
        </li>
        <li>
          <a href="#testimonial">客户评价
          </a>
        </li> -->
        <li>
          <a href="#contact">联系方式
          </a>
        </li>
      </ul>
      <!-- <ul class="social-media">
        <li>
          <a href="#">
            <i class="fa fa-facebook">
            </i>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-twitter">
            </i>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-youtube-play">
            </i>
          </a>
        </li>
      </ul> -->
    </div>
    <!-- end Toggle Menu -->
    <!-- Home section -->
    <section id="home" class="fill">
      <div class="home-background">
        <div class="home-layer">
          <div class="home-content">
            <img src="images/avatar.jpg" alt="">
            <!-- Avatar image source -->
            <h1>覃仁飞
            </h1>
            <h4>视觉设计师 &amp; 插画设计师
            </h4>
          </div>
          <!-- Scroll down button -->
          <a class="scroll-down" href="#portfolio">
            <i class="fa fa-angle-double-down">
            </i>
          </a>
          <!-- end Scroll down button -->
        </div>
      </div>
    </section>
    <!-- end Home section -->
    <section id="about">
      <div class="about">
        <div class="container">
          <h2 class="section-title">关于我
          </h2>
          <div class="row">
            <!-- About Me Picture -->
            <div class="col-xs-12 col-md-4 mix about-1">
              <img class="picture" src="images/avatar.jpg" alt="">
            </div>
              <!-- About Me Description -->
            <div class="col-xs-12 col-md-8 mix about-2">
              <p>毕业于常州大学怀德学院·视觉传达设计专业
              </p>
              <p>
              </p>
              <p>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Portfolio -->
    <section id="portfolio">
      <div class="portfolio-background">
        <div class="container">
          <h2 class="section-title">部分作品
          </h2>
          <!-- Portfolio filter -->
          <div class="portfolio-filter">
            <ul>
              <li class="filter" data-filter="all">all
              </li>
              <li class="filter" data-filter=".category-1">工作
              </li>
              <li class="filter" data-filter=".category-2">插画
              </li>
              <li class="filter" data-filter=".category-3">其他
              </li>
            </ul>
          </div>
          <!-- end Portfolio filter -->
          <div id="mix-container">
            <div class="row">
              <div id="class1"></div>
              <div id="class2"></div>
              <div id="class3"></div>
              <!-- end Portfolio box 4 -->
            </div>
            <!-- end row -->
          </div>
        </div>
        <!-- end container -->
      </div>
    </section>
    <!-- end Portfolio -->
    <!-- Services -->
    <section id="services">
      <div class="services-background">
        <div class="container">
          <div class="row">
            <!-- Services box 1 -->
            <div class="col-xs-12 col-sm-4 services-box">
              <div>
                <i class="icon icon-basic-webpage-img-txt">
                </i>
                <h4>UI
                </h4>
              </div>
            </div>
            <!-- Services box 2 -->
            <div class="col-xs-12 col-sm-4 services-box">
              <div>
                <i class="icon icon-basic-photo">
                </i>
                <h4>摄影
                </h4>
              </div>
            </div>
            <!-- Services box 3 -->
            <div class="col-xs-12 col-sm-4 services-box">
              <div>
                <i class="icon icon-basic-laptop">
                </i>
                <h4>插画
                </h4>
              </div>
            </div>
            <!-- end Services box 3 -->
          </div>
          <!-- end row -->
        </div>
        <!-- end container -->
      </div>
    </section>
    <!-- end Services -->
    <!-- Resume -->
    <!-- <section id="resume">
      <div class="resume-background">
        <div class="container">
          <h2 class="section-title">教育 &amp; 工作经验
          </h2>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <div class="resume-box">
                <div class="resume-icon">
                  <i class="icon icon-basic-book">
                  </i>
                </div>
                <div>
                  <h4>展馆设计
                  </h4>
                  <p>负责《苏州乐园》、《史前部落》、《奇趣自然岛》主题乐园的内容设计
                  </p>
                </div>
              </div>
              <div class="resume-box">
                <div class="resume-icon">
                  <i class="icon icon-basic-book">
                  </i>
                </div>
                <div>
                  <h4>University of IT
                  </h4>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-xs-12 col-md-6">
              <div class="resume-box">
                <div class="resume-icon">
                  <i class="icon icon-basic-case">
                  </i>
                </div>
                <div>
                  <h4>Themeforest
                  </h4>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                  </p>
                </div>
              </div>
              <div class="resume-box">
                <div class="resume-icon">
                  <i class="icon icon-basic-case">
                  </i>
                </div>
                <div>
                  <h4>PhotoDune
                  </h4>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section> -->
    <!-- end Resume -->
    <!-- Blog section -->
    <!-- <section id="blog">
      <div class="blog-background">
        <div class="container">
          <h2 class="section-title">Latest Blog Posts
          </h2>
          <div class="blogWrapper">
            <div id="blogSlider" class="owl-carousel">

              <div class="blog-post-box">
                <div class="blog-img">
                  <img src="images/blog-img-1.jpg" alt="">
                  <a href="#">
                    <div>
                      <span>read more
                      </span>
                    </div>
                  </a>
                </div>
                <h3>
                  <a href="#">Woman Walking on Bridge
                  </a>
                </h3>
                <span>Travel
                </span>
              </div>
              <div class="blog-post-box">
                <div class="blog-img">
                  <img src="images/blog-img-2.jpg" alt="">           
                  <a href="#">
                    <div>
                      <span>read more
                      </span>
                    </div>
                  </a>
                </div>
                <h3>
                  <a href="#">White Leather Backpack
                  </a>
                </h3>
                <span>Fashion
                </span>
              </div>
              <div class="blog-post-box">
                <div class="blog-img">
                  <img src="images/blog-img-3.jpg" alt="">
                  <a href="#">
                    <div>
                      <span>read more
                      </span>
                    </div>
                  </a>
                </div>
                <h3>
                  <a href="#">Woman sitting on Rock Cliff
                  </a>
                </h3>
            
                <span>Nature
                </span>

              </div>

            </div>

            <div class="customNavigation">
              <ul>
                <li id="prev">
                  <i class="fa fa-angle-left">
                  </i>
                </li>
                <li id="next">
                  <i class="fa fa-angle-right">
                  </i>
                </li>
              </ul>
            </div>

          </div>
        </div>

      </div>
    </section> -->
    <!-- end Blog section -->
    <!-- Testimonial -->
    <!-- <section id="testimonial">
      <div class="testimonial-background">
        <div class="testimonial-layer">
          <div class="testimonial-content">
            <div id="testimonialSlider" class="owl-carousel">
              <div class="testimonial-box">
                <h4>James Thomas
                </h4>
                <i class="fa fa-quote-right">
                </i>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </p>
              </div>
              <div class="testimonial-box">
                <h4>Terri Mills
                </h4>
                <i class="fa fa-quote-right">
                </i>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </p>
              </div>
              <div class="testimonial-box">
                <h4>Peter Williams
                </h4>
                <i class="fa fa-quote-right">
                </i>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section> -->
    <!-- end Testimonial -->
    <!-- Contact -->
    <section id="contact">
      <div class="contact-background">
        <div class="container">
          <h2 class="section-title">联系方式
          </h2>
          <div class="row">
            <!-- Contact Info -->
            <div class="col-xs-12 col-sm-4 contact-info">
              <ul>
                <li>
                  <h4>电话
                  </h4>
                  <span>+(86) 158-6115-8751
                  </span>
                </li>
              </ul>
            </div>
            <div class="col-xs-12 col-sm-4 contact-info">
              <ul>
                <li>
                  <h4>邮件
                  </h4>
                  <span>864242033@qq.com
                  </span>
                </li>
              </ul>
            </div>
            <div class="col-xs-12 col-sm-4 contact-info">
              <ul>
                <div>
                  <h4>地址
                  </h4>
                  <span>江苏常州
                  </span>
                </div>
              </ul>
            </div>
          </div>
          <!-- end row -->
        </div>
        <!-- end container -->
      </div>
    </section>
    <!-- end Contact -->
    <!-- Footer -->
    <footer>
      <div class="footer-background">
        <p>
          <strong>Designed by Amine Smahi &copy; 2017 JetLight Studio, All Rights Reserved</strong>
            </p>
            <!-- Footer Social Media icons -->
        <!-- <div class="social-footer">
          <a href="#">
            <i id="social-fb" class="fa fa-facebook-square fa-3x social">
            </i>
          </a>
          <a href="#">
            <i id="social-tw" class="fa fa-twitter-square fa-3x social">
            </i>
          </a>
          <a href="#">
            <i id="social-em" class="fa fa-github-square fa-3x social">
            </i>
          </a>
          <a href="#">
            <i id="social-gp" class="fa fa-google-plus-square fa-3x social">
            </i>
          </a>
          <a href="#">
            <i id="social-em" class="fa fa-linkedin-square fa-3x social">
            </i>
          </a>
        </div> -->
         <!-- end Footer Social Icons --> 
      </div>
    </footer>
    <!-- end Footer -->
    <!-- ##### JAVASCRIPTS ##### -->
    <!-- jQuery Library -->
    <script type="text/javascript" charset="UTF-8" src="js/string.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js">
    </script>
    <!-- Bootstrap js -->
    <script src="js/bootstrap.min.js">
    </script>
    <!-- Retina Graphics -->
    <script src="js/retina.min.js">
    </script>
    <!-- Magnific Popup -->
    <script src="js/jquery.magnific-popup.min.js">
    </script>
    <!-- Theme Plugins -->
    <script src="js/validator.min.js">
    </script>
    <!-- Custom Scripts -->
    <script src="js/scripts.min.js">
    </script>
    
    <!-- 作品数据类 -->
    <script type="text/javascript" charset="UTF-8" src="images/data.js"></script>
    <!-- 核心逻辑 -->
    <script type="text/javascript" charset="UTF-8" src="js/main.js"></script>
  </body>
</html>
